<template>
  <div class="score-board" v-if="visiable">
    <img class="bg-img" src="@/assets/football/排行榜背景.jpg" alt="" />
    <div class="table">
      <div class="row title">
        <div class="column merger">姓名</div>
        <div class="column" v-for="item in raceList">
          <div>{{ item.redTeam }}vs{{ item.blueTeam }}</div>
          <div>{{ item.hostScore }}:{{ item.guestScore }}</div>
        </div>
        <div class="column merger">积分</div>
      </div>
      <div class="content">
        <div class="row" v-for="item in personList">
          <div class="column" style="font-weight: bolder; font-size: 18px">
            {{ item.username }}
          </div>
          <div class="column" v-for="info in item.list">
            <div>
              <template>
                {{
                  info.projected_red_score === null
                    ? "-"
                    : info.projected_red_score
                }}:{{
                  info.projected_blue_score === null
                    ? "-"
                    : info.projected_blue_score
                }}
              </template>
              <template v-if="info.score > 0"
                >(<span style="color: red">{{ info.score }}</span
                >)</template
              >
            </div>
          </div>
          <div class="column" style="color: red; font-size: 20px">
            {{ item.score }}
          </div>
        </div>
      </div>
      <!-- <i class="el-icon-circle-close close-score" @click="closeWindows"></i> -->
      <img
        class="close-score"
        src="@/assets/football/足球.png"
        @click="closeWindows"
        alt=""
      />
    </div>
  </div>
</template>
<script>
import { getRaceList, getPersonRaceList } from "@/api/football";
import { getCurrentRaceScore, compareObj } from "@/utils/football-count";
export default {
  data() {
    return {
      raceList: [],
      personList: [],
      visiable: false,
    };
  },
  mounted() {
    this.$nextTick(function () {
      this.$on("show", function () {
        this.visiable = true;
      });
    });
    this.getRaceListFn();
  },
  methods: {
    closeWindows() {
      this.visiable = false;
      this.$comment.createPoint({ tableName:"football", moduleName: "竞猜页面排行榜", pageName: "/club/footballApply/paihang", eventName: "leave", localTime: new Date().Format("yyyy-MM-dd hh:mm:ss.S") })
      //   this.$emit("close", false);
    },
    getPersonRaceListFn() {
      getPersonRaceList().then((res) => {
        let data = res.data;
        let obj = {};
        let arr = [];
        data.forEach((item) => {
          if (!obj.hasOwnProperty(item.username)) {
            obj[item.username] = {};
            obj[item.username]["list"] = [];
            obj[item.username]["score"] = 0;
            obj[item.username]["username"] = item.username;
          }
          obj[item.username]["list"].push(item);
        });
        for (let key in obj) {
          let list = obj[key]["list"];
          let score = 0;
          list.forEach((info, index) => {
            // if(info.username == "Roy"){
            //     debugger
            // }
            let matchInfo = this.raceList[info.match_id - 1];
            score = getCurrentRaceScore(
              info.projected_red_score,
              info.projected_blue_score,
              matchInfo.hostScore,
              matchInfo.guestScore,
              info.best_pre_prediction,
              info.best_after_comments
            );
            obj[key]["score"] += score;
            obj[key]["list"][index]["score"] = score;
          });
        }
        for (let key in obj) {
          arr.push(obj[key]);
        }
        arr.sort(compareObj("score"));
        this.personList = arr;
        console.log(arr);
      });
    },
    // 获取赛程
    getRaceListFn() {
      getRaceList().then((res) => {
        console.log("赛程：", res);
        if (res.code === 0) {
          res.data &&
            res.data.forEach((item, index) => {
              let obj = {};
              obj.time = item.match_time;
              obj.redTeam = item.red_team.substr(0, 1);
              obj.blueTeam = item.blue_team.substr(0, 1);
              obj.matchId = item.id;
              obj.status = item.status;
              obj.projectedRedScore = null;
              obj.projectedBlueScore = null;
              obj.preMatchComments = "";
              obj.postMatchComments = "";
              obj.hostImg = require("../../../assets/football/" +
                item.red_team +
                ".jpg");
              obj.guestImg = require("../../../assets/football/" +
                item.blue_team +
                ".jpg");

              obj.hostScore = item.red_score != null ? item.red_score : "--";
              obj.guestScore = item.blue_score != null ? item.blue_score : "--";

              this.raceList.push(obj);
            });
        }
        this.getPersonRaceListFn();
      });
    },
  },
};
</script>
<style lang="stylus">
@keyframes shan {
  50% {
    opacity: 0.5;
  }
}

.score-board {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999;
  overflow: hidden;
  background-color: white;

  .bg-img {
    width: 100%;
    height: 100%;
    // opacity 0.8
    position: absolute;
    animation: shan 10s infinite linear;
  }

  .table {
    width: 85%;
    height: 80%;
    background-color: rgba(1, 1, 1, 0.65);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 20px;
    color: white;

    .close-score {
      width: 50px;
      position: absolute;
      right: -25px;
      top: -12px;
      color: black;
      font-weight: bolder;
      font-size: 35px;
      cursor: pointer;
      animation: zhuandong 20s infinite linear;
    }

    @keyframes zhuandong {
      0% {
        transform: rotate(0deg);
      }

      50% {
        transform: rotate(720deg);
      }

      100% {
        transform: rotate(1440deg);
      }
    }

    .title {
      width: 100%;
      display: flex;
      height: 80px;
      line-height: 30px;
      padding: 10px;
      border-bottom: 1px solid white;
      background-color: rgba(255,0,0,0.7);
      background-image: linear-gradient(#e66465, yellow);
      
      font-weight: bolder;
      border-radius: 20px 20px 0 0;
      color: white;
      font-size: 18px;

      .message {
        width: 20px;
      }

      .column {
        flex: 1;
        text-align: center;
        height: 60px;
      }

      .merger {
        line-height: 60px;
      }
    }

    .content {
      width: 100%;
      height: calc(100% - 80px);
      overflow: auto;
      overflow-x: hidden;

      .row {
        padding: 0 15px;
        // height: 60px;
        width: 100%;
        display: flex;
        cursor: pointer;

        .column {
          flex: 1;
          text-align: center;
          padding: 15px 0;
          border-bottom: 1px solid white;
          font-size 18px
        }
      }

      .row:nth-child(odd) {
        // background-color: rgba(1, 1, 1, 0.1);
        background-color rgba(248,216,159,0.7)
      }

      .row:nth-child(even) {
        // background-color: rgba(1, 1, 1, 0.3);
        background-color rgba(0,128,0,0.3)
      }

      .row:hover {
        background-color: red;
        color: black;
        opacity: 0.6;
        *{
          color:black !important
        }
      }

      &::-webkit-scrollbar {
        width: 1px;
      }

      &::-webkit-scrollbar-thumb {
        background: #3f3f3f;
        border-radius: 10px;
      }

      &::-webkit-scrollbar-track-piece {
        background: transparent;
      }
    }
  }
}
</style>